﻿{extend name="public:base" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link href="__ADMIN__/css/style.css" rel="stylesheet">

<style>
    .layui-input-block {
        margin-left: 134px;
        min-height: 36px;
    }

    .layui-form-label {
        float: left;
        display: block;
        width: 80px;
        font-weight: 400;
        line-height: 20px;
        text-align: left;
        padding: 0;
    }

    .layui-form-checkbox i {
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        height: 30px;
        border: 1px solid #d2d2d2;
        border-left: none;
        border-radius: 0 2px 2px 0;
        color: #fff;
        font-size: 20px;
        text-align: center;
    }

    .layui-form-checked i, .layui-form-checked:hover i {
        color: #5FB878;
    }

    .fairy-sku-table th, .fairy-sku-table td {
        text-align: center;
    }

    .layui-layer-btn0 {
        color: #fff !important;
    }
</style>
{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post" class="layui-form fairy-form">
                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">商品名</label>
                                <div class="col-sm-3">
                                    <input type="text" name="name" class="form-control" value="{$info.name}" placeholder="请输入商品名">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">封面图</label>
                                <div class="col-sm-6">
                                    <input type="file" id="img_file" accept="image/*" style="display: none">
                                    <input type="hidden" class="hidden_value" name="img" id="img" value="{$info['img']|default=''}"/>
                                    <div class="btn btn-w-m btn-primary" onclick="uploadImage('img_file', 'img', 'form-uploaded-box-single', false, 1)">原图上传</div>
                                    <div class="btn btn-w-m btn-primary" onclick="openCrop('form-uploaded-box-single', 1)">裁剪上传</div>

                                    <div class="form-uploaded-box" id="form-uploaded-box-single" style="width: 140px">
                                        {if $info.img}
                                        <div class="form-uploaded-img-box">
                                            <img class="form-uploaded-box-img" src="{:getPicture($info.img)}" data-id="{$info.img}">
                                            <i class="form-uploaded-img-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-img-preview')"></i>
                                            <i class="form-uploaded-img-del iconfont icon-close" onclick="delImage(this, 'cropper_uploaded_img_ids', 'cropper_uploaded_img_paths', 'form-')"></i>
                                        </div>
                                        {/if}
                                    </div>
                                </div>

                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">轮播图</label>
                                <div class="col-sm-6">
                                    <input type="file" id="imgs_file" multiple style="display: none">
                                    <input type="hidden" class="hidden_value" name="imgs" id="imgs" value="{$info['imgs']|default=''}"/>
                                    <div class="btn btn-w-m btn-primary" onclick="uploadImage('imgs_file', 'imgs', 'form-uploaded-box', false, 5)">原图上传</div>
                                    <div class="btn btn-w-m btn-primary" onclick="openCrop('form-uploaded-box', 5)">裁剪上传</div>

                                    <div class="form-uploaded-box" id="form-uploaded-box">
                                        {volist name="info.imgs_arr" id="vo"}
                                        <div class="form-uploaded-img-box">
                                            <img class="form-uploaded-box-img" src="{$vo.path}" data-id="{$vo.id}">
                                            <i class="form-uploaded-img-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-img-preview')"></i>
                                            <i class="form-uploaded-img-del iconfont icon-close" onclick="delImage(this, 'cropper_uploaded_img_ids', 'cropper_uploaded_img_paths', 'form-')"></i>
                                        </div>
                                        {/volist}
                                    </div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>


                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">所属分类</label>
                                <div class="col-sm-2">
                                    <select class="form-control one_type" name="one_type_id" lay-filter="one_type">
                                        <option value="0">请选择一级分类</option>
                                        {volist name="type_list" id="vo"}
                                        <option value="{$vo.id}" {if ($info.one_type_id == $vo.id)}selected{/if}>{$vo.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <select class="form-control two_type" name="two_type_id" lay-filter="two_type">
                                        <option value="0">请选择二级分类</option>
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="layui-form fairy-form">
                            <!-- 规格 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">规格：</label>
                                <div class="layui-input-block">
                                    <div class="sku-list"></div>
                                </div>
                                <div class="hr-line-dashed"></div>
                            </div>

                            <!-- 属性参数表 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">属性：</label>
                                <div class="layui-input-block">
                                    <div class="fairy-spec-table"></div>
                                </div>
                                <div class="hr-line-dashed"></div>
                            </div>

                            <!-- 动态属性表 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">属性表：</label>
                                <div class="layui-input-block">
                                    <div class="fairy-sku-table"></div>
                                </div>
                                <div class="hr-line-dashed"></div>
                            </div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">产品参数</label>
                                <div class="col-sm-1">
                                    <button class="btn btn-primary btn-xs add_param" type="button">新增产品参数</button>
                                </div>
                            </div>
                            <div class="param_main">
                                {empty name="info.product_param"}
                                <div class="form-group row product_params_div">
                                    <label class="col-sm-1 col-form-label"></label>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control product_param" placeholder="请输入参数名">
                                    </div>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control product_value" placeholder="请输入参数值">
                                    </div>
                                    <div class="btn-white btn-sm del_param" style="line-height: 25px;" onclick="delParam(this)">
                                        <i class="iconfont icon-trash"></i> 删除
                                    </div>
                                </div>
                                {else /}
                                {volist name="info.product_param" id="vo"}
                                <div class="form-group row product_params_div">
                                    <label class="col-sm-1 col-form-label"></label>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control product_param" placeholder="请输入参数名" value="{$vo.param}">
                                    </div>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control product_value" placeholder="请输入参数值" value="{$vo.value}">
                                    </div>
                                    <div class="btn-white btn-sm del_param" style="line-height: 25px;" onclick="delParam(this)">
                                        <i class="iconfont icon-trash"></i> 删除
                                    </div>
                                </div>
                                {/volist}
                                {/empty}

                            </div>

                            <!--     产品参数     -->
                            <input type="hidden" name="product_param" class="product_param_input" value="{$info.product_param}">

                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="row">
                                <label class="col-sm-1 col-form-label">用户须知</label>
                                <div class="col-lg-3">
                                    <div class="ibox ">
                                        <textarea class="form-control" name="user_instructions" rows="8">{$info.user_instructions}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="row">
                                <label class="col-sm-1 col-form-label">商品描述</label>
                                <div class="col-lg-6">
                                    <div class="ibox ">
                                        <textarea id="editor_id">{$info.content}</textarea>
                                        <textarea name="content" data-editor="kindEditor" style="display: none"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>

                        <input type="hidden" name="id" value="{:input('id')}">

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="button" class="btn btn-w-m btn-primary" lay-submit lay-filter="submit">
                                    提交
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{include file="public/cropper-img-mask" cropper_uploaded_img_ids="cropper_uploaded_img_ids" cropper_uploaded_img_paths="cropper_uploaded_img_paths" crop_preview_box="crop-preview-box" /}

{include file="public/preview-img-mask" swiper-id="cropper-preview" /}

{/block}

{block name='js'}
<script src="/static/layui/layui.js"></script>
<script src="/static/skuTable.js"></script>
<script type="text/javascript" src="__PLUG__/kindeditor/kindeditor-all.js"></script>

<!-- 实例化编辑器 && layUI select 处理 -->
<script>
    // 实例化编辑器
    initKindEditor('editor_id');

    //layUI select 处理
    layui.use('form', function () {
        var form = layui.form;

        var one_type_id = `{$info.one_type_id}` ? `{$info.one_type_id}` : 0;
        var two_type_id = `{$info.two_type_id}` ? `{$info.two_type_id}` : 0;

        var type_list = {$type_list_json};
        var option = '<option value="0">请选择二级分类</option>';

        if (one_type_id > 0) {
            for (var i = 0; i < type_list.length; i++) {
                if (one_type_id == type_list[i].id) {
                    var son_list = type_list[i].son_list;
                    son_list.forEach(function (val, key) {
                        var selected = '';
                        if (two_type_id == val.id) selected = "selected";
                        option += '<option value="' + val.id + '" ' + selected + '>' + val.name + '</option>'
                    })
                    break;
                }
            }

            $('.two_type').html(option);
            form.render('select');
        }

        //监听select的选中
        form.on('select(one_type)', function (data) {
            var type_list = {$type_list_json};
            var choose_one_type_id = $('.one_type').val();
            var option = '<option value="0">请选择二级分类</option>';

            if (choose_one_type_id > 0) {
                for (var i = 0; i < type_list.length; i++) {
                    if (choose_one_type_id == type_list[i].id) {
                        var son_list = type_list[i].son_list;
                        son_list.forEach(function (val) {
                            option += '<option value="' + val.id + '">' + val.name + '</option>'
                        })
                        break;
                    }
                }
            }

            $('.two_type').html(option);
            form.render('select');
        });

    });
</script>

<!-- 引入 skuTable.js -->
<script>
    layui.config({
        base: './'
    }).use(['form', 'skuTable'], function () {
        var form = layui.form, skuTable = layui.skuTable;

        //注意！！！ 注意！！！ 注意！！！
        //如果配置了相关接口请求的参数，请置本示例于服务器中预览，不然会有浏览器跨域问题
        //示例中的json文件仅做格式返回参考，若多次执行添加属性后再为新增后的属性添加属性值，会发现所有新增的属性都增加了该属性值。注意！此处并非是bug，原因是因为示例中返回的新增属性值id是重复的，而在正常接口请求每次返回的新增规则id是不一样的
        var obj = skuTable.render({
            //sku表相同属性值是否合并行
            rowspan: true,
            //上传接口地址
            //接口要求返回格式为 {"code": 200, "data": {"url": "xxx"}, "msg": ""}
            uploadUrl: "{:url('Upload/UploadFile/uploadSkuPicture')}",
            //添加属性接口地址，如果为空则表示不允许增加属性
            //接口要求返回格式为 {"code": 200, "data": {"id": "xxx"}, "msg": ""}
            specCreateUrl: '',
            //添加属性值接口地址，如果为空则表示不允许增加属性值
            //接口要求返回格式为 {"code": 200, "data": {"id": "xxx"}, "msg": ""}
            specValueCreateUrl: '',
            //sku表格配置参数
            skuTableConfig: {
                thead: [
                    {title: '图片', icon: ''},
                    {title: '市场价(元)', icon: 'layui-icon-cols'},
                    {title: '销售价(元)', icon: 'layui-icon-cols'},
                    {title: '库存', icon: 'layui-icon-cols'},
                    {title: '状态', icon: ''},
                ],
                tbody: [
                    {type: 'image', field: 'picture', value: '', verify: '', reqtext: ''},
                    {type: 'input', field: 'market_price', value: '0', verify: 'required|number', reqtext: '市场价不能为空'},
                    {type: 'input', field: 'price', value: '0', verify: 'required|number', reqtext: '销售价不能为空'},
                    {type: 'input', field: 'stock', value: '0', verify: 'required|number', reqtext: '库存不能为空'},
                    {
                        type: 'select', field: 'status', option: [{key: '启用', value: '1'}, {key: '禁用', value: '0'}],
                        verify: 'required', reqtext: '状态不能为空'
                    },
                ]
            },
            //属性数据, 一般从接口获取
            /*specData: [
                {
                    id: "1",
                    title: "颜色",
                    checked: true,
                    child: [
                        {id: "1", title: "红", checked: true},
                        {id: "2", title: "黄", checked: false},
                        {id: "3", title: "蓝", checked: false}
                    ]
                }, {
                    id: "2",
                    title: "尺码",
                    checked: true,
                    child: [
                        {id: "4", title: "S", checked: true},
                        {id: "5", title: "M", checked: false},
                        {id: "6", title: "L", checked: true},
                        {id: "7", title: "XL", checked: false}
                    ]
                }, {
                    id: "3",
                    title: "款式",
                    checked: true,
                    child: [
                        {id: "8", title: "男款", checked: true},
                        {id: "9", title: "女款", checked: true}
                    ]
                }
            ],*/
            specData: `{$sku_list}` ? {$sku_list} : [],

            //sku数据
            //新增的时候为空对象
            //编辑的时候可以从后台接收，会自动填充sku表，可以去掉注释看效果
            // skuData: {
            //     "skus[1-4-8][picture]": "https://preview.qiantucdn.com/58pic/10/21/01/97658PICV9209w094i2EN_PIC2018.jpg!w1024_new_small",
            //     "skus[1-4-8][market_price]": "200",
            //     "skus[1-4-8][price]": "100",
            //     "skus[1-4-8][stock]": "18",
            //     "skus[1-4-8][status]": "0",
            //     "skus[1-4-9][picture]": "",
            //     "skus[1-4-9][market_price]": "0",
            //     "skus[1-4-9][price]": "0",
            //     "skus[1-4-9][stock]": "0",
            //     "skus[1-4-9][status]": "1",
            //     "skus[1-5-8][picture]": "",
            //     "skus[1-5-8][market_price]": "0",
            //     "skus[1-5-8][price]": "0",
            //     "skus[1-5-8][stock]": "0",
            //     "skus[1-5-8][status]": "1",
            //     "skus[1-5-9][picture]": "",
            //     "skus[1-5-9][market_price]": "0",
            //     "skus[1-5-9][price]": "0",
            //     "skus[1-5-9][stock]": "0",
            //     "skus[1-5-9][status]": "1"
            // }
            skuData: `{$info.skus}` ? JSON.parse(`{$info.skus}`) : ''
        });

        // 提交表单
        form.on('submit(submit)', function (data) {
            // 保存产品参数 START
            var product_len = $('.product_param').length;
            var product = [];
            for (var i = 0; i < product_len; i++) {
                var product_param = $('.product_param').eq(i).val();
                var product_value = $('.product_value').eq(i).val();

                if (product_param !== '' && product_value !== '') {
                    var single_product = {
                        param: product_param,
                        value: product_value
                    };
                    product[product.length] = single_product;
                }
            }
            // 保存参数参数 END

            $('.product_param_input').val(JSON.stringify(product))

            var form_field = data.field;

            var state = Object.keys(data.field).some(function (item, index, array) {
                return item.startsWith('skus');
            });
            if (!state) {
                layer.msg('属性数据不能为空', {
                    icon: 5, anim: 6
                });
                return;
            }

            //删除表单中除了【属性表】之外的name元素
            for (var key in form_field) {
                if (form_field.hasOwnProperty(key)) {
                    if (key.indexOf("skus") == -1) {
                        delete form_field[key];
                    }
                }
            }

            //将富文本中的内容赋值到textarea隐藏域中以供表单提交
            window.editor.sync();
            $('textarea[name="content"]').val($('#editor_id').val());

            var formData = $('form').serialize();
            var skus = JSON.stringify(form_field);
            $.post("{:url('doGoods')}", {
                form: formData,
                skus: skus
            }, function (res) {
                layer.msg(res.msg)
                if (res.result == 1) {
                    setTimeout(function () {
                        window.location.href = res.url;
                    }, res.timer)
                }
            }, 'json');

            return false;
        });
    });
</script>

<!-- 产品参数 -->
<script>
    //新增产品参数
    $('.add_param').click(function () {
        var param_div = '<div class="form-group row product_params_div">\n' +
          '                                <label class="col-sm-1 col-form-label"></label>\n' +
          '                                <div class="col-sm-2">\n' +
          '                                    <input type="text" class="form-control product_param" placeholder="请输入参数名">\n' +
          '                                </div>\n' +
          '                                <div class="col-sm-2">\n' +
          '                                    <input type="text" class="form-control product_value" placeholder="请输入参数值">\n' +
          '                                </div>\n' +
          '                                <div class="btn-white btn-sm del_param" style="line-height: 25px;" onclick="delParam(this)"><i class="iconfont icon-trash"></i> 删除 </div>\n' +
          '                            </div>';

        $('.param_main').append(param_div);
    })

    // 删除产品参数
    function delParam(that) {
        var index = $('.del_param').index(that);
        $('.product_params_div').eq(index).remove();
    }
</script>
{/block}
